<template>
	<view>
		<!-- 校区备课列表页 -->
		<u-navbar class="navbarTop" back-icon-color="#fff" :is-back="true" :border-bottom="false" title="备课管理"
			title-color="#fff" :title-size="40">
			<!-- 头部筛选 -->
			<view class="headFeatures" slot="campusLessons">
				<u-button @click="show = true" :hair-line="false" class="uButton">
					<u-icon name="plus-circle-fill" color="#898CEA" size="40" style="margin-right: 5px;"></u-icon>
					<text>筛选</text>
				</u-button>
				<u-icon name="reload" color="#2979ff" size="40" class="resetIcon" :class="refresh?'resetIconRotate':''"
					@click="resetIcon()"></u-icon>
			</view>
		</u-navbar>

		<!-- 内容展示 -->
		<view class="uSection">
			<view v-show="yesOrNoitem == 0" v-for="item in itemList" :key="item.id" @click="goDetails(item)"
				class="cardView">
				<view class="imgView">
					<image src="../../static/classFileImg.png" mode="widthFix"></image>
				</view>
				<view class="textView">
					<!-- 文件名称 -->
					<view>{{item.title}}</view>
					<view>
						<!-- 上传人 -->
						<text>{{item.user_name}}</text>
						<!-- 上传时间 -->
						<text>{{item.created_at}}</text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#2979ff" size="35"></u-icon>
			</view>

			<u-empty v-show="yesOrNoitem == 1" text="还未有备课!" mode="favor" class="uEmpty" font-size="25" icon-size="150">
			</u-empty>
		</view>

		<!-- 弹出层 - 部门选择 - 文件选择 -->
		<u-popup v-model="show">
			<u-navbar :is-back="false" :border-bottom="false" title="筛选要求" title-color="#fff" :title-size="40">
			</u-navbar>
			<!-- 全部按键 -->
			<view class="btnSet">
				<view style="margin-bottom: 30rpx;">
					<uni-section title="上传人" type="line">
						<uni-data-select v-model="uploadValue" :localdata="uploadPerson"></uni-data-select>
					</uni-section>
				</view>
				<uni-section title="文件筛选" type="line">
					<uni-data-picker placeholder="请选择" popup-title="请选择文件所在区间" :localdata="fileDataTree"
						v-model="fileClasses" @change="onchange" :map="{text:'title',value:'id'}">
					</uni-data-picker>
				</uni-section>

				<u-divider>备课搜索</u-divider>
				<view class="search searchFile1">
					<u-input v-model="keyWord" :clearable="true" placeholder="请输入搜索内容" placeholder-style="paddingLeft:0"
						:custom-style="uInput1" :trim="true" />
					<u-button :disabled="isDisabled" @click="searchIcon">搜索</u-button>
				</view>
				<view class="subBtn">
					<button @click="resetBtn">重 置</button>
					<button @click="determine">确 认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refresh: false, //顶部刷新按钮
				itemList: [], //备课列表数据
				yesOrNoitem: 0, //是否有数据 判断显示内容(0正常,1无备课,2未搜到)
				show: false, //左侧弹出框
				isDisabled: true, //控制搜索按钮的禁用与否
				keyWord: '', //输入框的值
				uInput1: { //输入框的样式
					width: "80%",
					padding: "0 25rpx",
				},
				// 上传人
				uploadValue: "",
				uploadPerson: [],
				// 文件筛选
				fileClasses: "", //1-2
				fileDataTree: [], //disable: true选项上添加， 即为不可选 
			}
		},
		methods: {
			onchange(e) {
				console.log(e.detail.value, 'onchange');
			},
			// 重置数据
			resetData() {
				this.keyWord = ""
				this.itemList = []
				this.show = false
				this.uploadValue = ""
				this.fileClasses = ""
			},
			goDetails(item) { //点击其一备课详情按钮,跳转详情
				let item1 = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/index/monkeyDetails?title=备课详情&item=${item1}`
				})
			},
			getcampusData() { //备课列表信息
				uni.showLoading({
					title: '正在加载内容...'
				})
				this.$http(this.$api.campusLessons, {
					title: this.keyWord, //搜索框
					user_id: this.uploadValue, //上传人
					cate_id: this.fileClasses //文件列表
				}).then((res) => {
					this.refresh = false
					this.show = false
					uni.hideLoading()
					// 0正常,1无备课
					if (res.data.list.length != 0) {
						this.yesOrNoitem = 0
						this.itemList = res.data.list
						// 上传人
						let realNameArr = []
						res.data.user_name.forEach(item => {
							realNameArr.push({
								value: item.id,
								text: item.real_name
							})
						})
						this.uploadPerson = realNameArr
						// 文件筛选
						this.fileDataTree = res.data.cate
						uni.showToast({
							title: "内容加载成功",
							icon: "none",
							duration: 800,
						})
					} else if (res.data.list.length == 0) {
						this.yesOrNoitem = 1
					}
					uni.stopPullDownRefresh()
				})
			},
			resetIcon() { //顶部刷新按钮
				this.refresh = true
				this.resetData()
				setTimeout(() => {
					this.getcampusData()
				}, 200)
			},
			searchIcon() { //弹框搜索按钮
				this.itemList = []
				setTimeout(() => {
					this.getcampusData()
				}, 200)
			},
			resetBtn() { //弹框重置
				this.resetData()
				setTimeout(() => {
					this.getcampusData()
				}, 200)
			},
			determine() { //弹框确认
				this.itemList = []
				setTimeout(() => {
					this.getcampusData()
				}, 200)
			},
		},
		onLoad() {
			this.getcampusData() //备课列表信息
		},
		onPullDownRefresh() { //下拉刷新
			this.resetData()
			setTimeout(() => {
				this.getcampusData()
			}, 200)
		},
		watch: {
			keyWord() { //监视搜索框的值，空时，隐藏显示区
				if (this.keyWord != "") {
					this.isDisabled = false //启用搜索
				} else if (this.keyWord == "") {
					this.isDisabled = true //禁用搜索
				}
			}
		},
	}
</script>

<style>
	/* 头部筛选 */
	.headFeatures {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 5rpx 15rpx #ccc;
	}

	.uButton {
		width: 22% !important;
		display: block;
	}

	.uButton>button {
		border: none !important;
		margin-top: 3px;
	}

	.resetIcon {
		/* 顶部刷新按钮 */
		margin-right: 20px;
	}

	.resetIconRotate {
		/* 刷新功能*/
		transition: all 1s;
		transform: rotate(720deg);
	}

	/* 备课展示 */
	.uSection {
		margin: 20rpx 30rpx;
		margin-top: 140rpx;
	}

	.cardView {
		display: flex;
		align-items: center;
		box-shadow: 0 3px 5px #f4f4f5;
		border-radius: 20rpx;
		padding: 10rpx 30rpx;
		margin: 0 5px 15px;
	}

	.imgView {
		width: 20%;
		margin-right: 30rpx;
	}

	.imgView>image {
		display: block;
		width: 95%;
	}

	.textView {
		width: 60%;
		line-height: 50rpx;
	}

	.textView>view:nth-child(1) {
		font-weight: 900;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.textView>view:nth-child(2) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20rpx;
		color: #909399;
	}

	.cardView>u-icon {
		position: relative;
		top: 0;
		right: -55rpx;
	}

	.uEmpty {
		position: relative;
		top: 60rpx;
	}

	/* 点击 弹出左侧模块 */
	.btnSet {
		height: calc(100vh - 170rpx);
		padding: 10px;
		width: 500rpx;
		position: relative;
	}

	.u-divider {
		/* 分割线 */
		margin: 20px 0 !important;
	}

	.uDivider .u-divider:first-child {
		margin-top: 0px !important;
	}

	.search {
		/* 弹出框内 搜索框 */
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #dfe2e55e;
		border-radius: 15px;
		overflow: hidden;
		height: 60rpx;
		line-height: 60rpx;
	}

	u-input {
		width: 75%;
	}

	u-button {
		width: 23%;
	}

	button {
		font-size: 25rpx !important;
	}

	.search button {
		display: block;
		color: #fff !important;
		background: linear-gradient(to right, #9C6CEE, #78AAE8) !important;
	}

	.subBtn {
		/* 弹出框底部 重置确认按键 */
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
		margin-top: 100rpx;
	}

	.subBtn>button {
		width: 45%;
		padding: 2rpx 0;

	}

	.subBtn>button:last-child {
		color: #fff;
		background: linear-gradient(to right, #9C6CEE, #78AAE8);
	}
</style>
